<template>
    <UserHeader></UserHeader>
    <div class="sticky top-[6.5rem] z-10 md:block">
        <div
            class="relative bg-white p-3 mx-10 my-2 h-full border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
            <el-page-header :icon="ArrowLeft" title="返回个人主页" @back="goUserPersonIndex">
                <template #content>
                    <span class="text-large font-600 mr-3"> 用户信息管理 </span>
                </template>
            </el-page-header>
        </div>
    </div>

    <main class="pt-4 pb-4 pl-10 pr-10">
        <div class="grid grid-cols-4 gap-7">
            <!-- 游标栏 -->
            <div
                class="col-span-4 hidden order-2 lg:block md:col-span-1 mb-3 md:order-1 animate__animated animate__fadeInUp">
                <div class="fixed sticky top-[11rem]">
                    <div class="relative border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                        <div id="default-sidebar"
                            class="left-0 z-40  h-auto transition-transform -translate-x-full rounded-lg sm:translate-x-0"
                            aria-label="Sidebar">
                            <div class="h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800">
                                <ul class="space-y-2 font-medium">
                                    <li>
                                        <a @click="goPersonalCenter"
                                            class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
                                            <svg t="1734269152954"
                                                class="w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
                                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                p-id="4337" width="200" height="200">
                                                <path
                                                    d="M714.752 952.32L620.544 880.64H110.592c-61.44 0-110.592-49.152-110.592-110.592V274.432C0 212.992 49.152 163.84 110.592 163.84h802.816c61.44 0 110.592 49.152 110.592 110.592v495.616c0 61.44-49.152 110.592-110.592 110.592h-108.544v-61.44h108.544c26.624 0 49.152-22.528 49.152-49.152V274.432c0-26.624-22.528-49.152-49.152-49.152H110.592C83.968 225.28 61.44 247.808 61.44 274.432v495.616C61.44 796.672 83.968 819.2 110.592 819.2h530.432l110.592 83.968-36.864 49.152z"
                                                    fill="#3988FF" p-id="4338"></path>
                                                <path
                                                    d="M163.84 266.24h266.24c34.816 0 61.44 26.624 61.44 61.44v389.12c0 34.816-26.624 61.44-61.44 61.44H163.84c-34.816 0-61.44-26.624-61.44-61.44V327.68c0-34.816 26.624-61.44 61.44-61.44z"
                                                    fill="#DAE9FF" p-id="4339"></path>
                                                <path
                                                    d="M727.04 450.56h-165.888c-16.384 0-30.72-14.336-30.72-30.72s14.336-30.72 30.72-30.72h165.888c16.384 0 30.72 14.336 30.72 30.72s-12.288 30.72-30.72 30.72z"
                                                    fill="#3889FF" p-id="4340"></path>
                                                <path
                                                    d="M851.968 552.96H540.672c-12.288 0-20.48-8.192-20.48-20.48s8.192-20.48 20.48-20.48h309.248c12.288 0 20.48 8.192 20.48 20.48 2.048 12.288-8.192 20.48-18.432 20.48zM851.968 655.36H540.672c-12.288 0-20.48-8.192-20.48-20.48s8.192-20.48 20.48-20.48h309.248c12.288 0 20.48 8.192 20.48 20.48s-8.192 20.48-18.432 20.48zM235.52 471.04c-16.384 0-30.72-14.336-30.72-30.72s14.336-30.72 30.72-30.72 30.72 14.336 30.72 30.72-14.336 30.72-30.72 30.72z m143.36 0c-16.384 0-30.72-14.336-30.72-30.72s14.336-30.72 30.72-30.72 30.72 14.336 30.72 30.72-14.336 30.72-30.72 30.72zM245.76 552.96c0-12.288 8.192-20.48 20.48-20.48s20.48 8.192 20.48 20.48 8.192 20.48 20.48 20.48 20.48-8.192 20.48-20.48 8.192-20.48 20.48-20.48 20.48 8.192 20.48 20.48c0 34.816-26.624 61.44-61.44 61.44s-61.44-26.624-61.44-61.44z"
                                                    fill="#3988FF" p-id="4341"></path>
                                            </svg>
                                            <span class="flex-1 ms-3 whitespace-nowrap">个人资料</span>
                                            <span
                                                class="inline-flex items-center justify-center px-2 ms-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">用户</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a @click="goCountCenter"
                                            class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
                                            <svg t="1734269335329"
                                                class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
                                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                p-id="12476" width="200" height="200">
                                                <path
                                                    d="M992.385489 749.962773a46.247802 46.247802 0 0 0-43.558296-40.927259h-1.87096a28.649081 28.649081 0 0 1-28.707549-28.707548 40.927258 40.927258 0 0 1 2.572571-10.758022 50.632865 50.632865 0 0 0-17.540254-62.03403l-2.046363-1.520155L846.392112 575.788055l-2.046362-0.526207a56.245746 56.245746 0 0 0-20.522097-4.092726 54.667123 54.667123 0 0 0-38.471623 15.903163 76.007765 76.007765 0 0 1-19.995889 14.32454 27.947471 27.947471 0 0 0-13.330592-14.32454 422.25237 422.25237 0 0 0-87.701268-38.939363 294.851662 294.851662 0 1 0-299.35366 0.526208 491.127098 491.127098 0 0 0-336.772867 397.286742 33.034144 33.034144 0 0 0 32.274066 36.893 32.157131 32.157131 0 0 0 32.274067-27.655133 426.812835 426.812835 0 0 1 421.550759-365.714286 418.159644 418.159644 0 0 1 108.691104 14.32454l-6.139089 3.098778-2.046362 1.520156a51.509878 51.509878 0 0 0-17.949527 62.03403 27.538198 27.538198 0 0 1 2.572571 10.758022 28.649081 28.649081 0 0 1-28.707548 28.707548h-1.520156a46.423204 46.423204 0 0 0-44.610711 40.927258 303.095581 303.095581 0 0 0-4.618933 46.130867 381.032774 381.032774 0 0 0 4.618933 46.130867 46.247802 46.247802 0 0 0 43.558296 40.927258h2.046363a28.649081 28.649081 0 0 1 28.707548 28.707548 40.927258 40.927258 0 0 1-2.57257 10.758022 50.632865 50.632865 0 0 0 17.540253 62.03403l1.520156 1.520156 54.316318 30.227703 2.046363 0.526208a56.245746 56.245746 0 0 0 20.522097 4.092726 53.322371 53.322371 0 0 0 38.939362-16.429371 78.463401 78.463401 0 0 1 24.614823-17.540254 60.16307 60.16307 0 0 1 25.14103 17.540254 54.550188 54.550188 0 0 0 39.991778 17.540253 56.245746 56.245746 0 0 0 20.522096-4.092726l2.046363-0.526207 56.362682-31.280119 1.520155-1.520155a50.808268 50.808268 0 0 0 17.540253-62.03403 27.538198 27.538198 0 0 1-2.57257-10.758022 28.649081 28.649081 0 0 1 28.707548-28.707549h1.870961a45.487724 45.487724 0 0 0 43.558296-40.927258 303.095581 303.095581 0 0 0 4.618933-46.130866 172.128354 172.128354 0 0 0-2.57257-47.183282zM285.454805 295.260934a229.134178 229.134178 0 1 1 229.134179 229.134178A229.075711 229.075711 0 0 1 285.454805 295.260934z m655.654676 536.20555a81.854516 81.854516 0 0 0-76.35857 81.503711 79.515816 79.515816 0 0 0 6.665296 29.759964l-48.177229 27.187393h-0.526208a104.013703 104.013703 0 0 0-63.554185-34.32043 105.650794 105.650794 0 0 0-63.554185 33.85269h-0.526208l-47.183282-26.661186a79.398881 79.398881 0 0 0-69.693274-111.088272 210.483042 210.483042 0 0 1-4.092726-35.080507 176.571885 176.571885 0 0 1 4.092726-35.080507 81.854516 81.854516 0 0 0 76.417038-81.854516 79.515816 79.515816 0 0 0-6.665296-29.759964l41.511933-23.094667a231.122074 231.122074 0 0 1 29.759963 15.376956 29.584561 29.584561 0 0 0 8.71166 3.098778 71.271897 71.271897 0 0 0 32.274066 9.237867 102.318145 102.318145 0 0 0 62.03403-31.806327h0.526208l47.651022 26.661186a79.398881 79.398881 0 0 0 69.693274 111.088272 210.483042 210.483042 0 0 1 4.092726 35.080507 284.093639 284.093639 0 0 1-3.098779 35.899052z m0 0"
                                                    fill="#409EFF" p-id="12477"></path>
                                                <path
                                                    d="M758.57391 707.924632a88.695215 88.695215 0 1 0 88.695215 88.695215 88.695215 88.695215 0 0 0-88.695215-88.695215z m0 124.594267a35.899052 35.899052 0 1 1 35.899052-35.899052 35.665182 35.665182 0 0 1-35.899052 35.899052z m0 0"
                                                    fill="#409EFF" p-id="12478"></path>
                                            </svg>
                                            <span class="flex-1 ms-3 whitespace-nowrap">账号设置</span>
                                            <span
                                                class="inline-flex items-center justify-center px-2 ms-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">账号</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 内容栏 -->
            <div class="col-span-4 order-1 h-full md:col-span-3 md:order-2 animate__animated animate__fadeInUp">
                <div
                    class="relative bg-white h-full border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                    <div class="pt-7 pl-5">
                        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-400">
                            <img :src="blogSettingsStore.blogSettings.miniLogo" class="h-10 mr-2 inline"
                                alt="wjblog Logo" />
                            个人资料
                        </h3>
                    </div>
                    <el-divider />
                    <div class="text-base pl-7 font-medium dark:text-gray-400">
                        基本信息
                    </div>
                    <div class="p-4 md:p-5">
                        <!-- 引入 Element Plus 表单组件，移动端设置宽度为 5/6，PC 端设置为 2/5 -->
                        <el-form class="space-y-4" ref="formRef" :rules="rules" :model="personForm" label-width="auto">
                            <el-form-item prop="avatar" label="头像">
                                <el-upload class="avatar-uploader"
                                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                    :show-file-list="false" :on-change="handleUserAvatarImg">
                                    <el-avatar v-if="personForm.avatar" :size="100" :src="personForm.avatar" />
                                    <el-icon v-else class="avatar-uploader-icon">
                                        <Avatar />
                                    </el-icon>
                                </el-upload>
                            </el-form-item>
                            <el-form-item prop="username" label="用户ID">
                                <el-input size="large" v-model="personForm.userId" placeholder="用户ID不可修改"
                                    :prefix-icon="Key" clearable disabled />
                            </el-form-item>
                            <el-form-item prop="username" label="用户名">
                                <el-input size="large" v-model="personForm.username" placeholder="请输入用户名(用于账户登录，不可修改)"
                                    :prefix-icon="User" clearable disabled />
                            </el-form-item>
                            <el-form-item prop="mail" label="邮箱">
                                <el-input size="large" v-model="personForm.mail" placeholder="暂未绑定邮箱，需要修改请到账号设置中修改"
                                    :prefix-icon="Message" clearable disabled />
                            </el-form-item>
                            <el-form-item prop="nickname" label="昵称">
                                <el-input size="large" v-model="personForm.nickname" placeholder="请输入昵称"
                                    :prefix-icon="Sugar" clearable />
                            </el-form-item>
                            <el-form-item prop="signature" label="个性签名">
                                <el-input size="large" v-model="personForm.signature" placeholder="请介绍一下自己"
                                    :prefix-icon="EditPen" clearable />
                            </el-form-item>
                            <el-form-item prop="qqId" label="QQ号码">
                                <el-input size="large" v-model="personForm.qqId" placeholder="暂未绑定QQ，需要修改请到账号设置中修改"
                                    :prefix-icon="ChatRound" clearable disabled />
                            </el-form-item>
                            <el-form-item prop="phoneNumber" label="手机号码">
                                <el-input size="large" v-model="personForm.phoneNumber"
                                    placeholder="暂未绑定手机号，需要修改请到账号设置中修改" :prefix-icon="Iphone" clearable disabled />
                            </el-form-item>

                            <el-form-item prop="localCity" label="所在城市">
                                <el-input size="large" v-model="personForm.localCity" placeholder="请选择自己所在城市"
                                    :prefix-icon="Location" disabled clearable />

                                <el-cascader size="large" v-model="personForm.localCityCode" :options="areaOptions"
                                    :props="cascaderProps" class="w-full" @change="handleCityChange"
                                    placeholder="请选择省市区"
                                    style="margin-right: 10px ;margin-bottom: 10px; margin-top: 10px;" clearable />
                            </el-form-item>

                            <el-form-item prop="university" label="毕业院校">
                                <el-input size="large" v-model="personForm.university" placeholder="请选择自己的毕业/在读院校"
                                    :prefix-icon="School" disabled clearable />
                                <!-- 省份选择 -->
                                <el-select size="large" v-model="selectedProvince" placeholder="先选择省份"
                                    @change="handleSchoolCityChange()" class="w-full"
                                    style=" margin-right: 10px ;margin-bottom: 10px; margin-top: 10px;">
                                    <el-option v-for="provinceSchools in schoolList" :key="provinceSchools.province"
                                        :label="provinceSchools.province" :value="provinceSchools.province" />
                                </el-select>
                                <!-- {{ selectedProvinceSchools }} -->
                                <el-autocomplete v-model="selectedSchool" :fetch-suggestions="schoolQuerySearch"
                                    :disabled="!selectedProvince" placeholder="输入学校名称，如：北京大学" clearable
                                    @select="handleSchoolSelect" style=" margin-right: 10px ;margin-bottom: 10px;"
                                    class="w-full">
                                    <!-- 自定义显示模板 -->
                                    <template #default="{ item }">
                                        <div class="school-item">
                                            <span class="name">{{ item.name }}</span>
                                            <!-- <span class="info"> --- {{ item.city }} · {{ item.type }} · {{ item.level }}</span> -->
                                        </div>
                                    </template>
                                </el-autocomplete>
                            </el-form-item>
                            <el-form-item prop="github" label="Github链接">
                                <el-input size="large" v-model="personForm.github" placeholder="请输入自己的Github链接"
                                    :prefix-icon="Link" clearable />
                            </el-form-item>
                            <el-form-item prop="gitee" label="Gitee链接">
                                <el-input size="large" v-model="personForm.gitee" placeholder="请输入自己的Gitee链接"
                                    :prefix-icon="Link" clearable />
                            </el-form-item>
                            <el-form-item prop="personBlog" label="个人博客">
                                <el-input size="large" v-model="personForm.personBlog" placeholder="请输入自己的个人博客链接"
                                    :prefix-icon="Collection" clearable />
                            </el-form-item>
                            <el-form-item prop="introduce" label="个人介绍">
                                <el-input v-model="personForm.introduce" :autosize="{ minRows: 2, maxRows: 4 }"
                                    type="textarea" placeholder="大胆地介绍自己" clearable />
                            </el-form-item>
                            <el-form-item prop="sex" label="性别">
                                <el-radio-group v-model="personForm.sex" class="pl-3">
                                    <el-radio value="0">女生</el-radio>
                                    <el-radio value="1">男生</el-radio>
                                    <el-radio value="2">保密</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item prop="birthday" label="生日">
                                <div class="inline pl-3">
                                    <el-date-picker v-model="personForm.birthday" type="date" placeholder="生日"
                                        value-format="YYYY-MM-DD" :disabled-date="disabledDate" :shortcuts="shortcuts"
                                        :size="size" />
                                </div>
                            </el-form-item>
                            <el-form-item label="用户注册时间" prop="registerTime">
                                <span
                                    class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">{{
                                    personForm.registerTime }}</span>
                            </el-form-item>
                            <el-form-item label="资料最近更新于" prop="updateTime">
                                <span
                                    class="bg-purple-100 text-purple-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-purple-900 dark:text-purple-300">{{
                                    personForm.updateTime }}</span>
                            </el-form-item>
                            <div class="p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400"
                                role="alert">
                                <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                    <path
                                        d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
                                </svg>
                                <span class="font-semibold">温馨提示：</span> 如果需要修改邮箱，QQ号码，手机号码等信息请到【账号设置】页面进行修改，用户名不可修改。
                            </div>
                            <div class="flex items-center justify-center">
                                <el-button class="mt-2 dark:text-gray-100" size="large" type="primary"
                                    :loading="loading" @click="onSaveUserInfo">保存个人信息</el-button>
                            </div>

                            <!-- <button type="submit" @click="userLogin"
                            class="w-full text-white bg-sky-600 font-medium hover:bg-sky-700 focus:ring-4 focus:outline-none focus:ring-sky-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-sky-500 dark:hover:bg-sky-600 dark:focus:ring-sky-800">
                            登录
                        </button> -->
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <Footer></Footer>
</template>

<script setup>
import Header from '@/layouts/frontend/components/Header.vue';
import Footer from '@/layouts/frontend/components/Footer.vue';
// 引入 Element Plus 中的用户、锁图标
import { User, Lock, Checked, Avatar, Message, UserFilled, EditPen, ChatRound, Phone, Location, School, Iphone, Sugar, Key, ArrowLeft, Link, Collection } from '@element-plus/icons-vue'
import { getUserDetailInfo, login, updateUserPersonInfo } from '@/api/admin/user';
import {ref, reactive, onMounted, onBeforeUnmount, watch} from 'vue'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { showMessage, showModel } from '@/composables/utils';
import { getToken, setToken } from '@/composables/auth';
import { useUserStore } from '@/stores/user';
import { useDark, useToggle } from '@vueuse/core'
import { register } from '@/api/frontend/user';
import { uploadFile } from '@/api/frontend/file';
import { useBlogSettingsStore } from '@/stores/blogsettings';
import UserHeader from '@/layouts/frontend/components/UserHeader.vue';
import schools from '@/assets/ChinaUniversityList.json';
import { regionData } from 'element-china-area-data';

const blogSettingsStore = useBlogSettingsStore()

const size = ref('default')
const value1 = ref('')
const value2 = ref('')

const shortcuts = [
  {
    text: '今天',
    value: new Date(),
  },
  {
    text: '昨天',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: '一周前',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]

const disabledDate = (time) => {
  return time.getTime() > Date.now()
}
const userStore = useUserStore()
const router = useRouter()
const personForm = reactive({
    userId: null,
    username: null,
    nickname: null,
    mail: null,
    signature: null,
    sex: null,
    qqId: null,
    phoneNumber: null,
    birthday: null,
    localCity: null,
    university: null,
    avatar: null,
    github: null,
    gitee: null,
    personBlog: null,
    introduce: null,
    registerTime: null,
    updateTime: null,
    localCityCode: null
})
const formRef = ref(null)
//表单验证规则
const rules = {
    username: [
        {
            required: true,
            message: "用户账号不能为空！",
            trigger: "blur"
        }
    ],
    password: [
        {
            required: true,
            message: "密码不能为空！",
            trigger: "blur"
        }
    ],
    confirmPassword: [
        {
            required: true,
            message: "确认密码不能为空！",
            trigger: "blur"
        }
    ],
    mail: [
        {
            required: true,
            message: "邮箱不能为空！",
            trigger: "blur"
        }
    ],
    nickname: [
        {
            required: true,
            message: "昵称不能为空！",
            trigger: "blur"
        }
    ]
}

// 是否选择省份
const isSelectProvince = ref(false)
const schoolList = ref(schools)
// 所选择省份
const selectedProvince = ref('')
// 所选择省份的学校列表
const selectedProvinceSchools = ref([])
// 所选择学校
const selectedSchool = ref('')
// 选择省份改变，更新学校库
const handleSchoolCityChange = () => {
    let ps = schoolList.value.filter(school => school.province === selectedProvince.value)[0];
    selectedProvinceSchools.value = ps.schools;
    isSelectProvince.value = true;
    // selectedProvinceSchools.value = value;
}

// 学校搜索
const schoolQuerySearch = (queryString, cb) => {
    const results = queryString ? selectedProvinceSchools.value.filter(schoolFilter(queryString)) : selectedProvinceSchools.name;
    cb(results);
};

// 学校过滤器
const schoolFilter = (queryString) => {
    return (school) => {
        return school.name.toLowerCase().indexOf(queryString.toLowerCase())=== 0;
    }
};

// 学校选择
const handleSchoolSelect = (item) => {
    console.log(item);
    personForm.university = item.name;
    selectedSchool.value = item.name
}

const selectedArea = ref([]); // 绑定选中的省市区编码数组
// 配置选项显示规则
const cascaderProps = {
  value: 'value',    // 选项值字段
  label: 'label',    // 选项显示字段
  children: 'children' // 子级字段
};

// 使用 Element 内置的中国省市区数据
const areaOptions = regionData;

// 城市选择变化
const handleCityChange = (value) => {
    personForm.localCity = encodeArea(value)  
}
// 将城市编码数组转换为字符串
const encodeArea = (codes) => {
    if (codes == null || codes.length == 0) {
        return ""
    }

    // 获取城市数据库
    let cityData = areaOptions
    // 遍历编码数组，获取对应的城市名称
    let names = []
    for (const code of codes) {
        const nodeCity = cityData.find(node => node.value === code)

        if (nodeCity) {
            names.push(nodeCity.label)
            // 更新为子城市数据
            cityData = nodeCity.children || []
        } else {
            // 找不到对应的城市，返回空字符串
            names.push("")
            break
        }
    }
    // 将城市名称数组转换为字符串
    return names.join("-")
}

// 将城市逆向为编码数组
const decodeArea = (name) => {
    if (name == null || name == "") {
        return []
    }

    // 获取城市数据库
    let cityData = areaOptions
    // 将城市名称字符串转换为数组
    let names = name.split("-")
    // 遍历城市名称数组，获取对应的城市编码
    let codes = []  
    for (const name of names) {
        const nodeCity = cityData.find(node => node.label === name)

        if (nodeCity) {
            codes.push(nodeCity.value)
            // 更新为子城市数据
            cityData = nodeCity.children || []  
        }  else {
            // 找不到对应的城市，返回空数组
            break 
        }
    }

    return codes;
}

// 跳转到个人资料页
const goPersonalCenter = () => {
    router.push({ path: '/safeguard/user/person/center' })
}
// 跳转到账号修改页面
const goCountCenter = () => {
    router.push({ path: '/safeguard/user/count/center' })
}

// 跳转到个人主页
const goUserPersonIndex = () => {
    router.push({ path: '/user/person/' + userStore.userInfo.userId })
}

const confirmLogin = () => {
    let tmpUserStore = useUserStore()
    let tk = Object.keys(tmpUserStore.userInfo)
    let token = getToken()
    return tk.length > 0 || token
}

// 获取用户信息
const getUserDetailData = () => {
    // 获取token
    let token = getToken()
    // 获取用户信息
    let userInfo = userStore.userInfo
    // 验证登录状态
    if (token == null || userInfo == null) {
        showMessage("请先登录！", 'error')
        router.push('/user/login')
        return
    }

    // 获取用户个人资料
    getUserDetailInfo().then((res) => {
        if (res.success == true) {
            let data = res.data
            // 将用户信息保存到表单中
            personForm.userId = data.userId
            personForm.username = data.username
            personForm.nickname = data.nickname
            personForm.mail = data.mail
            personForm.qqId = data.qqId
            personForm.phoneNumber = data.phoneNumber
            personForm.signature = data.signature
            personForm.sex = data.sex + ''
            personForm.birthday = data.birthday
            personForm.localCity = data.localCity
            personForm.university = data.university
            personForm.avatar = data.avatar
            personForm.github = data.github
            personForm.gitee = data.gitee
            personForm.personBlog = data.personBlog
            personForm.introduce = data.introduce
            personForm.registerTime = data.registerTime
            personForm.updateTime = data.updateDataTime
            // 解码城市
            personForm.localCityCode = decodeArea(data.localCity)
        } else {
            let message = res.message
            showMessage(message, 'error')
        }
    })

}
getUserDetailData()
onMounted(() => {
    getUserDetailData()
})
// 上传头像图片
const handleUserAvatarImg = (file) => {
    let formData = new FormData()
    //添加file字段
    formData.append('file', file.raw)
    uploadFile(formData).then((res) => {
        if (res.success == true) {
            personForm.avatar = res.data.url
            showMessage("上传头像成功！")
        } else if(res.success == false) {
            let message = res.message
            showMessage(message, 'error')
        }
    }).catch((err) => {
        showMessage("上传失败或请求超时！", 'error') 
    })
}

//登录加载按钮
const loading = ref(false)
// 提交修改请求
const onSave = () => {
    //校验表单字段
    formRef.value.validate((valid) => {
        if (valid == false) {
            // 校验失败，不执行注册逻辑
            return
        }
        // 构造请求实体
        let params = {
            userId: personForm.userId,
            nickname: personForm.nickname,
            signature: personForm.signature,
            sex: personForm.sex,
            birthday: personForm.birthday,
            localCity: personForm.localCity,
            university: personForm.university,
            avatar: personForm.avatar,
            github: personForm.github,
            gitee: personForm.gitee,
            personBlog: personForm.personBlog,
            introduce: personForm.introduce,
        }
        // 发送个人资料修改请求
        updateUserPersonInfo(params).then((res) => {
            if (res.success == true) {
                // 注册成功，跳转到登录页面
                showMessage('修改成功！', 'success')
                // 重新获取信息
                getUserDetailData()
                // 重新获取userInfo
                userStore.setUserInfo()
            } else {
                // 修改失败
                showMessage(res.message,'error')
            }
        }).catch((err) => {
            // 修改失败
            showMessage(err.message,'error')
        })
    })
}

// 保存个人信息
const onSaveUserInfo= () => {
    // 开启加载动画
    loading.value = true
    // 跳出确认框
    showModel("确认修改个人信息？", "warning", "确认保存?", true).then(() => {
        // 执行保存个人信息
        onSave()
    }).finally(() => {
        // 关闭加载动画
        loading.value = false
    })
}

// 按回车键后，执行注册事件
function onKeyUp(e) {
    console.log(e)
    if (e.key == 'Enter') {
        onSaveUserInfo()
    }
}

// 添加键盘监听
onMounted(() => {
    console.log('添加键盘监听')
    document.addEventListener('keyup', onKeyUp)
})

// 移除键盘监听
onBeforeUnmount(() => {
    document.removeEventListener('keyup', onKeyUp)
})
</script>